import React, { useEffect, useState, useMemo, useCallback } from "react";
import { Button, Card, Space, Popover, Drawer } from 'antd';
import { BorderOutlined } from '@ant-design/icons';
import { producestore } from "../../stores/Produce";
import type { TableColumnsType } from 'antd';
import { useSnapshot } from "valtio";
import Htables from "@/components/Htables";
import Show from "@/components/Show";
import { post } from "../../request";
import Excel from "../finance/Excel";
import Headers from "@/components/Headers";
import Message from "@/components/Message";
interface DataType {
    key: React.Key;
    icons: any;
    origin: string;
    outlet: string;
    OrderID: number;
    DealTime: string;
    brand: string;
    price: number;
    seller: string;
    phone: number;
    ShippingAddress: string;
    city: string;
    OrderStatus: any;
}

export default function Management() {
    const store = useSnapshot(producestore);
    const [originlist, setOriginlist] = useState([
        { value: '美团', label: '美团' },
        { value: '饿了么', label: '饿了么' },
        { value: '饭盟小店', label: '饭盟小店' },
    ]);
    const [outletlist, setOutletlist] = useState([]);
    const [message, setMessage] = useState<string>('');
    const [messages, setMessages] = useState<string[]>([]);
    const data = store.data;
    const getBrandList = useCallback(() => {
        post("/brand/getBrand").then((res) => {
            setOutletlist(res.brandNameList);
        });
    }, []);
    useEffect(() => {
        store.getList();
        store.initSocket();
        getBrandList();
    }, [getBrandList]);
    const text = useMemo(
        () => <div className="bg-#eee">显示字段设置</div>,
        []
    );

    const columns: TableColumnsType<DataType> = [
        {
            title: <BorderOutlined />,
            dataIndex: 'icon',
            render: () => <BorderOutlined />,
            key: "1"
        },
        {
            title: '订单来源',
            dataIndex: 'origin',
            key: "2"
        },
        {
            title: '配送点(门店)',
            dataIndex: 'outlet',
            key: "3"
        },
        {
            title: '订单号',
            dataIndex: 'OrderID',
            key: "4"
        },
        {
            title: '成交时间',
            dataIndex: 'DealTime',
            render: (DealTime: string) => new Date(DealTime).toLocaleString(),
            key: "5"
        },
        {
            title: '品牌',
            dataIndex: 'brand',
            key: "6"
        },
        {
            title: '金额',
            dataIndex: 'price',
            key: "7"
        },
        {
            title: '卖家',
            dataIndex: 'seller',
            key: "8"
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: "9"
        },
        {
            title: '收货地址',
            dataIndex: 'ShippingAddress',
            key: "10"
        },
        {
            title: '城市',
            dataIndex: 'city',
            key: "11"
        },
        {
            title: '订单状态',
            dataIndex: 'status',
            key: "12"
        },
        {
            title: (
                <span>
                    操作
                    <Popover placement="bottom" content={text} trigger="hover">
                        <BorderOutlined className="ml-5" style={{ color: '#7677ff' }} />
                    </Popover>
                </span>
            ),
            render: (text: any, record: DataType) => (
                <Space size="middle">
                    {record.OrderStatus === '已打包' ? <a>通知取餐</a> : ""}
                    <a onClick={() => {
                        store.showlist(record);
                        setOpen(true);
                    }}>查看</a>
                    <a onClick={() => {
                        setorigin(record.origin);
                        setId(record._id);
                        setShow(true)
                    }}>打印</a>
                </Space>
            ),
            key: "13"
        }
    ];
    const [open, setOpen] = useState(false);
    const onClose = useCallback(() => setOpen(false), []);
    const pagination = useMemo(() => ({
        defaultPageSize: 5,
        total: data.length,
        showSizeChanger: true,
        showQuickJumper: false,
        pageSizeOptions: ['5', '10', '20']
    }), [data.length]);
    const [id, setId] = useState<string>('');
    const [origin, setorigin] = useState<string>('');
    const [show, setShow] = useState(false);
    const [shows, setShows] = useState(false);
    let info = {
        headTitle: "打印确认提示",
        bodyTitle: `是否确定重新打印`,
        bodyContent: `【${origin} ${id}】的订单`,
    }
    let infos = {
        headTitle: "打印确认提示",
        bodyTitle: `是否确定重新打印全部的数据`,
        bodyContent: ``,
    }
    return (
        <div className='w-[100%]'>
            <Message info={info} show={show} setShow={setShow} callBack={() => { }}></Message>
            <Message info={infos} show={shows} setShow={setShows} callBack={() => { }}></Message>
            <Drawer
                width={700}
                style={{ height: "100vh" }}
                onClose={onClose}
                open={open}
            >
                <Show />
            </Drawer>
            <Headers originlist={originlist} flag={false} outletlist={outletlist} />
            <Card
                title="订单筛选"
                extra={
                    <div>
                        <Button className="ml-5 color-gray" onClick={() => {
                            setShows(true)
                        }}>
                            <BorderOutlined /> 打印
                        </Button>
                        <Button className="ml-5 color-gray">
                            <BorderOutlined /> <Excel data={data} fileName={"订单列表"} />
                        </Button>
                    </div>
                }
                className='w-[90%] m-auto mt-10 min-w-[1200px]'
            >
                <Htables columns={columns} data={data} open={open} pagination={pagination} />
            </Card>
        </div>
    );
}